<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <link rel="stylesheet" href="../dist/leaflet-plot.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="../dist/leaflet-plot.min.js"></script>
    <!-- <script src="../src/js/L.SL.js"></script> -->
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body,
      #map {
        height: 100%;
        margin: 0;
      }

      #toolbar {
        position: absolute;
        left: 10px;
        bottom: 10px;
        list-style: none;
        margin: 0;
        padding: 10px;
        z-index: 999;
        box-shadow: 2px 2px 5px;
        background-color: rgb(34 34 34 / 50%);
        border-radius: 0 5px 5px 0;
      }

      #toolbar li {
        line-height: 28px;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <ul id="toolbar">
      <li><button onclick="addStraightArrow()">细直箭头</button></li>
      <li><button onclick="addRightAngleArrow()">直箭头</button></li>
      <li><button onclick="addTailedArrow()">燕尾箭头</button></li>
      <li><button onclick="addDoubleArrow()">双箭头</button></li>
      <hr />
      <li><button onclick="clearPlots()">清空</button></li>
    </ul>
    <script>
      const map = L.map('map', { attributionControl: false, editable: true }).setView([23, 113], 5)

      const tiles = L.tileLayer(
        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        {
          maxZoom: 19
        }
      ).addTo(map)
      let plotLayer = L.featureGroup().addTo(map)
      const clearPlots = () => {
        plotLayer && plotLayer.clearLayers()
      }
      window.map = map
      map.on('sl:create', (e) => {
        console.log(e.layer)
        e.layer.on('click', () => {
          e.layer.sl.enable()
          console.log(e.layer.sl)
        })
        e.layer.addTo(plotLayer)
      })
      map.on('click', (e) => {
        console.log(898, e)
      })
      // 细直箭头
      const addStraightArrow = () => {
        map.sl.enableDraw('StraightArrow')
      }
      // 燕尾箭头
      const addTailedArrow = () => {
        map.sl.enableDraw('TailedArrow')
      }
      // 直箭头
      const addRightAngleArrow = () => {
        map.sl.enableDraw('RightAngleArrow', { color: 'red' })
      }

      // 钳击
      const addDoubleArrow = () => {
        map.sl.enableDraw('DoubleArrow')
      }
    </script>
  </body>
</html>
